import React, { useEffect, useMemo, useRef, useState } from 'react';
// import '@antv/s2'
import { SheetComponent } from '@antv/s2-react';
import { CellMeta, CellTextWordWrapStyle, ColCell, GuiIcon, renderIcon, renderText, S2Options, TableColCell, TargetCellInfo, ThemeCfg } from '@antv/s2';
import { ColCellTooltip, CustomColCell, customSVGIcons } from './ColCell';


const S2Table = ({
    dataSource,
    columns,
    height = 480
}) => {
    const cellTextWordWrapStyle: CellTextWordWrapStyle = {
        // 最大行数，文本超出后将被截断
        maxLines: 3,
        // 文本是否换行
        wordWrap: true,
        // 可选项见：https://g.antv.antgroup.com/api/basic/text#textoverflow
        textOverflow: 'ellipsis',
    };

    const s2Options: S2Options = {
        // width,
        height,
        seriesNumber: {
            enable: true
        },
        style: {
            colCell: cellTextWordWrapStyle,
        },
        customSVGIcons,
        colCell: (node, spreadsheet, headerConfig) => {
            return new CustomColCell(node, spreadsheet, headerConfig);
        },
        tooltip: {
            colCell: {
                content(cell, defaultTooltipShowOptions) {
                    const meta = cell.getMeta()
                    return <ColCellTooltip meta={meta} />
                },
            },
            autoAdjustBoundary: 'container'
        }
    }
    const themeOptions: ThemeCfg = {
        theme: {
            scrollBar: {
                hoverSize: 12
            }
        }
    }

    const dataCfg = useMemo(() => {
        return {
            data: dataSource,
            fields: {
                columns: columns?.map(m => {
                    return m.dataIndex && {
                        field: m.dataIndex,
                        title: m.dataIndex,
                        columnType: m.columnType
                    }
                })?.filter(Boolean)
            }
        }
    }, [dataSource])

    return <SheetComponent
        sheetType='table'
        dataCfg={dataCfg}
        options={s2Options}
        adaptive={{
            width: true,
            height: false
        }}
        themeCfg={themeOptions}
    >
    </SheetComponent>
}
export default S2Table